<template>
  <!-- 问答查询条件 -->
  <ElCard style="height: 75px;display: flex;align-items: flex-start;">
    <ElForm :inline="true" :model="searchLogForm" label-width="80px">
      <ElFormItem label="登录账号">
        <ElInput v-model="searchLogForm.userName" placeholder="请输入" style="width: 220px;"></ElInput>
      </ElFormItem>
      <ElForm-item label="登录时间" prop="loginTime">
        <ElDatePicker
            v-model="searchLogForm.loginTime"
            type="date"
            format="YYYY-MM-DD"
            placeholder="请选择日期"
        />
      </ElForm-item>
      <ElFormItem>
        <ElButton @click="handleReset">重置</ElButton>
        <ElButton color="blue" :icon="Search.name" type="primary" @click="loadLogData">搜索</ElButton>
        <ElButton type="primary" @click="exportTableData">导出数据</ElButton>
      </ElFormItem>
    </ElForm>
    <div class="pagination-container">
      <ElPagination
          background
          layout="prev, pager, next,sizes,total"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
          :page-sizes="[10, 20, 30]"
          :current-page="currentPage"
          :total="total"
          style="position: absolute;bottom: 15px;right: 50px;" />
    </div>
  </ElCard>
  <!-- 问答表格 -->
  <ElCard style="height: 66vh;margin-top: 10px;overflow: auto;">
    <ElTable id="educe-table"
             :data="currentPageData" style="width:100%;"
             :header-cell-style="{'text-align': 'center','background-color': '#F2F2F2',height: '60px',fontWeight: 'bold',color:'black'}">
      <ElTableColumn type="index" label="序号" width="60" />
      <ElTableColumn label="登录账号" prop="userName" align="center" />
      <ElTableColumn label="登录时间" prop="loginTime" align="center" />
      <ElTableColumn label="登录终端" prop="os" align="center" />
      <ElTableColumn label="登录IP" prop="ipAddr" align="center" />
      <ElTableColumn label="登录浏览器" prop="browser" align="center" />
    </ElTable>
  </ElCard>
</template>
<script setup>
import {computed, onMounted, ref} from "vue";
import {Search} from "@element-plus/icons-vue";
import {exportTable} from "@/utils/utils";
import axios from "axios";
import qs from "qs";
import {ElMessage} from "element-plus";

const exportTableData = () => {
  const elt = document.getElementById("educe-table");
  if (elt) {
    exportTable(elt, "登录日志", "登录日志导出", 1);
  } else {
    console.error("Element with id 'educe-table' not found.");
  }
};

onMounted(() => {
  loadLogData();
})

const searchLogForm = ref({
  userName: "",
  loginTime: "",
});

const LogArr = ref([]);

const loadLogData = () => {
  axios.get(getBaseURL(4)+"/v1/loginInfo/select?"+qs.stringify(searchLogForm.value))
      .then(response => {
        if (response.data.code === 2000) {
          LogArr.value = response.data.data;
        } else {
          ElMessage.error(response.data.msg);
        }
      })
      .catch(error => {
        ElMessage.error(error.message);
      });
}

//重置查询条件
const handleReset = () => {
  searchLogForm.value = {}
  loadLogData();
}


const pageSize = ref(10);
const currentPage = ref(1);

const currentPageData = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  return LogArr.value.slice(start, end);
});

const total = computed(() => LogArr.value.length);

const handleCurrentChange = (page) => {
  currentPage.value = page;
};

const handleSizeChange = (size) => {
  pageSize.value = size;
  currentPage.value = 1;
};

</script>

<style scoped>

</style>
